<template>
  <div class="Login">
    <div class="background"></div>
    <div class="container">
      <div class="item">
        <h2 class="logo"><i class='bx bxl-xing'></i>Blog</h2>
        <div class="text-item">
          <h2>Welcome! <br><span>
              To My Blog
            </span></h2>
          <p>让我们一起快乐学习吧(●ˇ∀ˇ●)</p>
          <div class="social-icon">
            <a href="#"><i class='bx bxl-github'></i></a>
            <a href="#"><i class='bx bx-copyright'></i></a>
            <a href="#"><i class='bx bxs-message-rounded-dots'></i></a>
          </div>
        </div>
      </div>
      <div class="login-section">
        <div class="form-box login">
          <form action="">
            <h2>登录</h2>
            <div class="input-box">
              <span class="icon"><i class='bx bx-user-pin'></i></span>
              <input type="username" required v-model="loginForm.userName">
              <label>Username</label>
            </div>
            <div class="input-box">
              <span class="icon"><i class='bx bxs-lock-alt'></i></span>
              <input type="password" required v-model="loginForm.password">
              <label>Passwrod</label>
            </div>
            <div class="remember-password">
              <label for=""><input type="checkbox">记住我</label>
              <a href="#">忘记密码</a>
            </div>
            <button class="btn" :loading="loading" @click="handleLogin">登录</button>
          </form>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
const loginsec = document.querySelector('.login-section')
const loginlink = document.querySelector('.login-link')
const registerlink = document.querySelector('.register-link')
registerlink.addEventListener('click', () => {
  loginsec.classList.add('active')
})
loginlink.addEventListener('click', () => {
  loginsec.classList.remove('active')
})
</script>

<script>
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        userName: '',
        password: ''
      },
      loading: false,
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    handleLogin(){
          this.loading = true
          this.$store
            .dispatch('Login', this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || '/' })
              this.loading = false
            }).catch(() => {
              this.loading = false
            })
    }
  }
}
</script>
<style scoped>
@import url(https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css);
@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;1,500&display=swap);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "poppins", sans-serif;
}

body {
  height: 100vh;
  width: 100%;
  background: #000;

}

.background {
  background: url(../../assets/images/backgroun3.jpg) no-repeat;
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100%;
  filter: blur(10px);
}

.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  height: 550px;
  margin-top: 20px;
  background: url(../../assets/images/backgroun3.jpg) no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 20px;
  overflow: hidden;
}

.item {
  position: absolute;
  top: 0;
  left: 0;
  width: 58%;
  height: 100%;
  color: #fff;
  background: transparent;
  padding: 80px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;

}

.item .logo {
  color: #fff;
  font-size: 30px;

}

.text-item h2 {
  font-size: 40px;
  line-height: 1;
}

.text-item p {
  font-size: 16px;
  margin: 20px 0;
}

.social-icon a i {
  color: #fff;
  font-size: 24px;
  margin-left: 10px;
  cursor: pointer;
  transition: .5s ease;
}

.social-icon a:hover i {
  transform: scale(1.2);
}

.container .login-section {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(100% - 58%);
  height: 100%;
  color: #fff;
  backdrop-filter: blur(10px);
}

.login-section .form-box {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

}

.login-section .form-box.register {
  transform: translateX(430px);
  transition: transform .6s ease;
  transition-delay: 0s;
}

.login-section.active .form-box.register {
  transform: translateX(0px);
  transition-delay: .7s;
}

.login-section .form-box.login {
  transform: translateX(0px);
  transition: transform .6s ease;
  transition-delay: 0.7s;
}

.login-section.active .form-box.login {
  transform: translateX(430px);
  transition-delay: 0s;
}

.login-section .form-box h2 {
  text-align: center;
  font-size: 25px;
}

.form-box .input-box {
  width: 340px;
  height: 50px;
  border-bottom: 2px solid#fff;
  margin: 30px 0;
  position: relative;
}

.input-box input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  padding-right: 28px;
}

.input-box label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 600px;
  pointer-events: none;
  transition: .5s ease;

}

.input-box .icon {
  position: absolute;
  top: 13px;
  right: 0;
  font-size: 19px;
}

.input-box input:focus~label,
.input-box input:valid~label {
  top: -5px;
}

.remember-password {
  font-size: 14px;
  font-weight: 500;
  margin: -15px 0 15px;
  display: flex;
  justify-content: space-between;
}

.remember-password label input {
  accent-color: #fff;
  margin-right: 3px;

}

.remember-password a {
  color: #fff;
  text-decoration: none;
}

.remember-password a:hover {
  text-decoration: underline;
}

.btn {
  background: #fff;
  width: 100%;
  height: 45px;
  outline: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: #f72d7a;
  font-size: 16px;
  color: #fff;
  box-shadow: rgba(0, 0, 0, 0.4);

}

.create-account {
  font-size: 14.5px;
  text-align: center;
  margin: 25px;
}

.create-account p a {
  color: #fff;
  font-weight: 600px;
  text-decoration: none;
}

.create-account p a:hover {
  text-decoration: underline;
}
</style>